<template>
  <div class="app-container">
    <list-admin
      v-model="list"
      :entity-conf="entity"
      :list-display="fields"
      :list-filter="filters"
      :disabled-actions="disabled"
      :query="query"
    >
      <template v-slot:extraAction="{ data }">
        <el-button slot="reference" size="small" type="warning" icon="el-icon-refresh" plain @click="transaction(data)">转账</el-button>
      </template>
    </list-admin>

    <el-dialog
      v-if="balance !== ''"
      title="账号转账"
      :visible.sync="transactionVisible"
      width="40%"
    >
      <el-form label-width="100px">
        <el-form-item label="账号">
          <el-input v-model="balance.user.__toString" :disabled="true" />
        </el-form-item>
        <el-form-item label="剩余金额">
          <el-input v-model="balance.amount" :disabled="true" />
        </el-form-item>
        <el-form-item label="目标电话">
          <el-row>
            <el-col :span="18">
              <el-input v-model="username" />
            </el-col>
            <el-col :span="6">
              <el-button @click="findUser">搜索</el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="目标账户">
          <el-input v-model="accountName" :disabled="true" />
        </el-form-item>
        <el-form-item label="转账类型">
          <el-select v-model="transactionType" placeholder="请选择">
            <el-option
              v-for="item in transactionTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="转账原因">
          <el-input v-model="comment" />
        </el-form-item>
        <el-form-item label="转账金额">
          <el-row>
            <el-col :span="18">
              <el-input v-model="transactionAmount" type="number" />
            </el-col>
            <el-col :span="6">
              <el-button @click="transactionAmount = parseFloat(balance.amount)">全部转出</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="transactionVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitTransaction">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ListAdmin from '@/components/EasyAdmin/ListAdmin'
import admin from '@/config'

export default {
  components: { ListAdmin },
  data() {
    return {
      entity: '',
      alias: '',
      list: [],
      config: {},
      fields: [],
      filters: null,
      entityParam: this.$route.params.entityParam,
      amount: 0,
      balance: '',
      transactionAmount: 0,
      transactionVisible: false,
      username: '',
      toUser: { username: '请输入电话号码', id: 0 },
      comment: '',
      accountName: '',
      transactionType: 'administrator',
      transactionTypes: [
        {
          value: 'liquor-fee',
          label: '场所酒水费用'
        },
        {
          value: 'administrator',
          label: '管理员调整'
        },
        {
          value: 'reimbursement',
          label: '报销'
        },
        {
          value: 'marketing-expenses',
          label: '营销费用'
        }
      ]
    }
  },
  created() {
    // Load entities data
    this.alias = 'Balance'

    if (!Object.keys(admin.entities).includes(this.alias)) {
      console.log('NO!')
    } else {
      console.log(admin.entities)
      this.config = admin.entities[this.alias]
      this.entity = Object.keys(this.config).includes('entity') ? this.config.entity : this.alias
      this.fields = this.config.list.list_display
      this.filters = this.config.list.list_filter
      this.disabled = this.config.list.disabled_actions
      this.query = this.config.list.query
    }
  },
  methods: {
    // 转账
    submitTransaction() {
      if (this.toUser.id === 0) {
        this.$message.error('请输入目标电话并点击搜索')
        return
      }
      if (this.transactionAmount <= 0) {
        this.$message.error('请输入正数！')
        return
      }
      if (this.transactionAmount > parseFloat(this.balance.amount)) {
        this.$message.error('余额不足！')
        return
      }
      if (this.comment === '') {
        this.$message.error('请填写转账原因')
        return
      }
      console.log(this.balance)
      const data = {
        from: this.balance.user.id,
        to: this.toUser.id,
        amount: this.transactionAmount
      }
      console.log(data)
      this.axios.post(`/manage/transactions/send/from/${data.from}/to/${data.to}/amount/${data.amount}`, { comment: this.comment, type: this.transactionType }).then((res) => {
        this.balance = ''
        this.transactionAmount = 0
        this.toUser = { username: '请输入电话号码', id: 0 }
        this.transactionVisible = false
        this.$message.success('转账成功！')
      })
    },
    transaction(data) {
      this.transactionVisible = true
      this.balance = data
    },
    findUser() {
      if (this.username === '') {
        this.$message.error('请输入目标账号')
        return
      } else {
        this.axios.get(`/manage/users`, { params: { '@filter': `entity.getUsername() == "${this.username}"` }}).then((res) => {
          if (res.data.length === 0) {
            this.$message.error('目标用户不存在！')
          } else {
            console.log(123, res.data)
            this.toUser = res.data[0]
            this.accountName = res.data[0].username
            this.axios.get(`/manage/fuiou-accounts`, { params: {
              '@filter': `entity.getUser().getId() == ${res.data[0].id}`
            }}).then((res) => {
              console.log('account', res.data)
              if (res.data.length > 0) {
                this.accountName += `(${res.data[0].outAcntNm})`
              } else {
                this.accountName += `(未绑定钱包)`
              }
            })
          }
        })
      }
    }
  }
}
</script>
